<!-- 
    密码修改
 -->

<template>
    <div style="height:40px"></div>
    <div class="modify-pwd">
        <h2 style="padding-bottom:20px;border-bottom:1px solid #ccc">修改密码</h2>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="70px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="coonfigPassword">
            <el-input v-model.number="ruleForm.coonfigPassword" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">确认修改</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import cookie from "js-cookie"
import { post } from "@/utils/index"
import { ElMessage } from "element-plus";
import router from "@/router";
const ruleFormRef = ref<FormInstance>()
// 原密码
const validateOldPass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入原密码'))
    }else{
        callback()
    }
}

const validateNewPass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入新密码'))
    }else if (value == ruleForm.oldPassword){
        callback(new Error('新密码不能与原密码一致'))
    } else {
        callback()
    }
}

const validateCoonfigPass = (rule: any, value: any, callback: any) => {
    if (value === '') {
    callback(new Error('请再次确认密码'))
  } else if (value != ruleForm.newPassword) {
    callback(new Error("与新密码不一致"))
  } else {
    callback()
  }
}

// 数据
const ruleForm = reactive({
    oldPassword: '',
    newPassword: '',
    coonfigPassword: '',
})
// 验证逻辑判断
const rules = reactive({
    oldPassword: [{ validator: validateOldPass, trigger: 'blur' }],
    newPassword: [{ validator: validateNewPass, trigger: 'blur' }],
    coonfigPassword: [{ validator: validateCoonfigPass, trigger: 'blur' }],
})

// 确认修改密码
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            let data = reactive({
                _gp:'admin',
                _mt:'newPassword',
                oldPassword:ruleForm.oldPassword,
                newPassword:ruleForm.newPassword,
            })
            post(data).then((res) => {
                console.log(res)
                if('成功'== res.errmsg){
                    ElMessage.success("修改密码成功需要重新登录")
                    router.replace("/login")
                }else{
                    ElMessage.error(res.errmsg)
                }
            })
        } else {
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="less" scoped>
    .modify-pwd{
        width: 600px;
        margin: auto;
        background-color: white;
        box-shadow: 0px 2px 20px 6px #ccc;
        border-radius: 10px;
        .el-form{
            padding: 20px;
        }
        h2{
            padding: 20px;
        }
    }
</style>